<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>初识Vue01</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        初始Vue:
        1. 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
        2. root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
        3. root容器里面的代码被称为`Vue模板`;
        4. Vue实例和容器是一一对应的;
        5. 真实开发中只有一个Vue实例,并且会配合组件一起使用;
        6. {{xxx}}中要写js表达式,且xxx可以自动读取到data中所有的属性;
        7. 一旦data中的数据发生改变,那么模板(页面)中用到该数据的地方会自动更新;

        注意区分:js表达式 和 js代码(语句)
            1. 表达式:一个表达式会产生一个值,可以放在任何一个需要值得地方;js表达式是一种特殊的js代码
                1. `a` 一个变量
                2. `a+b` 一个运算表达式
                3. `demo(1)` 一个函数表达式(函数没有返回,返回undefined,undefined也是基本数据类型之一)
                4. `x === y ? 'a' : 'b'` 三元表达式(==是值是否相等,===是值与类型是否都相等)
            2. js代码(语句)
                1. `if(){}`
                2. `for(){}`
     -->

    <!-- 准备一个容器 -->
    <div id="root1">
        <h1>Hello,{{name}}</h1>
        <h1>我的年龄是:{{age}}</h1>
    </div>
    <h1>{{name}}</h1>
    <div id="root2">
        <h1>Hello,{{name.toUpperCase()}}</h1>
        <h1>我的年龄是:{{age}}</h1>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;  //组织vue在启动时生成生产提示

    //创建Vue实例 ()里面的{}叫做配置对象 配置对象的key不能更改,配置对象的值可以更改,配置对象值类型不能更改
    new Vue({
        el: '#root1', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串. //el是element简写,这边是css中id选择器
        // el:document.getElementById('root1')
        data: {//data中用于存储数据,数据供el中所指定的容器去使用,值我们暂时先写成一个对象.(剧透,到组件时会写成一个函数)
            name: '尚硅谷123',
            age: 18
        }
    });
    new Vue({
        el: '#root2',
        data: {
            name: 'shangguigu',
            age: 28
        }
    });
    console.log('------------------');
    console.log('1' == 1 ? 'a' : 'b');
    console.log('1' === 1 ? 'a' : 'b');
    console.log('------------------');

</script>

</html>